@import plugins.Context
@import controllers.rules.routes.Assets
@import controllers.workspace.routes.WorkspaceApi
@import org.silkframework.rule.execution.GenerateLinks
@import org.silkframework.rule.LinkSpec
@import views.html.workspace.activity.taskActivityControl

@(context: Context[LinkSpec])(implicit session: play.api.mvc.Session)

@header = {
  <link type="text/css" href="@Assets.at("stylesheets/table.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/pagination.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/links.css")" rel="stylesheet" />
  <link rel="stylesheet" href="@Assets.at("stylesheets/treeview/jquery.treeview.css")" type="text/css" />
  
  <script src="@Assets.at("js/jquery.pagination.js")" type="text/javascript"></script>
  <script src="@Assets.at("js/jquery.treeview.js")" type="text/javascript"></script>
  <script src="@Assets.at("js/links.js")" type="text/javascript"></script>
  
  <script type="text/javascript">
    var apiUrl = '@config.baseUrl/linking/tasks/@context.project.name/@context.task.id/referenceLink';
    var taskUrl = '@config.baseUrl/linking/tasks/@context.project.name/@context.task.id';

    initLinks('generateLinks', 'links');

    $( window ).load(function() {
     $("#links_stream_wrapper").append('<iframe src="generateLinks/linksStream" frameborder="0" height="0" width="100%"></iframe>');
    });
  </script>
}

@toolbar = {
  <ul>
    <li>
      @taskActivityControl(context.task.activity[GenerateLinks], showButtons = true)
    </li>
  </ul>
}

@content = {
  <div class="mdl-shadow--2dp">
    <div class="wrapper">

      <div id="tree-header">
        <div class="left">
          <button id="button_expand_all" class="mdl-button mdl-js-button mdl-button--icon" onclick="expand_all();">
            <i class="material-icons">expand_more</i>
          </button>
          <div class="mdl-tooltip" for="button_expand_all">
            Expand all
          </div>
          <button id="button_hide_all" class="mdl-button mdl-js-button mdl-button--icon" onclick="hide_all();">
            <i class="material-icons">expand_less</i>
          </button>
          <div class="mdl-tooltip" for="button_hide_all">
            Collapse all
          </div>
          <!--
                  <div class="toggle-all"><div class="plus"></div><a href="#" onclick="expand_all();">Expand All</a></div>
                  <div class="toggle-all"><div class="minus"></div><a href="#" onclick="hide_all();">Collapse All</a></div>
          -->
        </div>
        <div class="middle">
          <div class="navigation"></div>
        </div>
        <div class="right">
          Filter:
          <input onkeyup="updateFilter(this.value)"></input>
        </div>
        <div id="pending"><img src="@Assets.at("img/pending.gif")"></div>
      </div>

      <div id="links"></div>

    </div>
  </div>

  <div id="links_stream_wrapper" style="display: none;"/>
}

@main(Some(context))(header)(toolbar)(content)